<template>
  <div class="app-container">
    <el-form :model="body" ref="queryForm" :inline="true" size="small" label-width="86px">
      <!-- 第一行 -->
      <el-row style="display: flex; flex-wrap: nowrap;">
        <el-form-item label="区域编码:" prop="regionCode">
          <el-input v-model="body.regionCode" placeholder="请输入区域编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单时间:" prop="orderTime">
          <el-date-picker v-model="body.orderTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态:" prop="status">
          <el-select v-model="body.status" clearable placeholder="请选择">
            <el-option v-for="item in orderOption" :key="item.id" :label="item.value" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-form-item label="用户名称:" prop="userName">
          <el-input v-model="body.userName" placeholder="请输入用户名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码:" prop="phone">
          <el-input v-model="body.phone" placeholder="请输入用户手机号" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务类别:" prop="taskCategoryId">
          <el-input v-model="body.taskCategoryId" placeholder="请输入用户手机号" clearable></el-input>
        </el-form-item>
        <el-button @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-row>
    </el-form>
    <order-table title="待接订单" :orderContent="pendingOrderList"></order-table>
    <!-- 分页器 -->
    <pagination v-show="true" :total="total" @pagination="handlePagination" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" />
  </div>
</template>
<script>
import OrderTable from '@/components/OrderTable/index'
export default {
  name: "PendingOrders",
  components: { OrderTable },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      orderOption: [],
      // body: {
      //   orderId: "",
      //   orderTime: [],
      //   orderStatus: "",
      //   belongRegion: [],
      //   phone: "",
      //   username: ""
      // },
      body: {
        regionCode: "",
        userName: "",
        phone: "",
        taskCategoryId: "",
        status: "",
        startCreateTime: "",
        endCreateTime: ""
      },
      pendingOrderList: [],
      total: 0
    }
  },
  methods: {
    // 查询按钮操作
    handleQuery() {
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 切换分页操作
    handlePagination({ page, limit }) {
      this.queryParams = {
        ...this.queryParams,
        pageNum: page,
        pageSize: limit
      }
    }
  },
}
</script>
<style lang="scss" scoped></style>